import {
  View,
  Text,
  ScrollView,
  Image,
  StyleSheet,
  Dimensions,
} from 'react-native';
import React from 'react';
import {SvgXml} from 'react-native-svg';
// import LinearGradient from 'react-native-linear-gradient';
import {
  xml1,
  xml2,
  xml3,
  xml4,
  xml5,
  xml6,
  xml7,
  xml8,
  xml9,
  xml10,
} from './svg';

export default function Mine() {
  return (
    // <LinearGradient colors={['#dbebff', '#f4f9ff']}>
    <ScrollView style={{backgroundColor: '#97DC93'}}>
      <View>
        <Text style={{color: '#fff', fontSize: 18, marginLeft: 20}}>
          保定理工学院
        </Text>
        <Text
          style={{color: '#fff', fontSize: 14, marginLeft: 20, marginTop: 5}}>
          河北省保定市莲池区
        </Text>
      </View>
      <View style={[style.box]}>
        <View style={[style.container]}>
          <View style={[style.headerItemParent]}>
            <View style={[style.headerItem,{backgroundColor:'#95DC93'}]}>
              <SvgXml xml={xml1} width="30" height="30" />
            </View>
            <Text style={[style.headerItemText]}>学校信息</Text>
          </View>
          <View style={[style.headerItemParent]}>
            <View style={[style.headerItem,{backgroundColor:'#2E86FE'}]}>
              <SvgXml xml={xml2} width="30" height="30" />
            </View>
            <Text style={[style.headerItemText]}>学生食谱</Text>
          </View>
          <View style={[style.headerItemParent]}>
            <View style={[style.headerItem,{backgroundColor:'#FF6E6E'}]}>
              <SvgXml xml={xml3} width="30" height="30" />
            </View>
            <Text style={[style.headerItemText]}>抽检公示</Text>
          </View>
          <View style={[style.headerItemParent]}>
            <View style={[style.headerItem,{backgroundColor:'#FFD23E'}]}>
              <SvgXml xml={xml4} width="30" height="30" />
            </View>
            <Text style={[style.headerItemText]}>食材供应商</Text>
          </View>
          <View style={[style.headerItemParent]}>
            <View style={[style.headerItem,{backgroundColor:'#FAB26D'}]}>
              <SvgXml xml={xml5} width="30" height="30" />
            </View>
            <Text style={[style.headerItemText]}>人员健康证</Text>
          </View>
          <View style={[style.headerItemParent]}>
            <View style={[style.headerItem,{backgroundColor:'#5962F5'}]}>
              <SvgXml xml={xml6} width="30" height="30" />
            </View>
            <Text style={[style.headerItemText]}>营养搭配</Text>
          </View>
          <View style={[style.headerItemParent]}>
            <View style={[style.headerItem,{backgroundColor:'#95DC93'}]}>
              <SvgXml xml={xml7} width="30" height="30" />
            </View>
            <Text style={[style.headerItemText]}>卫生检查</Text>
          </View>
          <View style={[style.headerItemParent]}>
            <View style={[style.headerItem,{backgroundColor:'#FF6E6E'}]}>
              <SvgXml xml={xml8} width="30" height="30" />
            </View>
            <Text style={[style.headerItemText]}>投诉统计</Text>
          </View>
          <View style={[style.headerItemParent]}>
            <View style={[style.headerItem,{backgroundColor:'#FFD23E'}]}>
              <SvgXml xml={xml9} width="30" height="30" />
            </View>
            <Text style={[style.headerItemText]}>人员管理</Text>
          </View>
          <View style={[style.headerItemParent]}>
            <View style={[style.headerItem,{backgroundColor:'#95DC93'}]}>
              <SvgXml xml={xml10} width="30" height="30" />
            </View>
            <Text style={[style.headerItemText]}>收货地址管理</Text>
          </View>
        </View>
        <View style={[style.foot]}>
          <View
            style={{
              marginTop: 200,
            }}>
            <View style={{}}>
              <Image
                style={{
                  width: Dimensions.get('window').width - 40,
                  height: 120,
                }}
                source={require('../../public/R-C.jpg')}
                resizeMode="cover"
              />
            </View>
          </View>
          <View
            style={{
              paddingLeft: 10,
              paddingRight: 10,
              marginTop: 20,
            }}>
            <View>
              <Text style={{color: '#000', fontWeight: '900', fontSize: 15}}>
                餐饮服务食品安全信息公布
              </Text>
            </View>

            <View
              style={{
                marginTop: 20,
                flexDirection: 'row',
                justifyContent: 'space-evenly',
              }}>
              <View
                style={{
                  alignItems: 'center',
                  width: Dimensions.get('window').width / 2 - 40,
                }}>
                <View>
                  <Text style={{color: '#FFBD2A', fontSize: 40}}>95</Text>
                </View>
                <View>
                  <Text style={[style.headerItemText, {fontWeight: '900'}]}>
                    本月考核评级
                  </Text>
                </View>
              </View>
              <View style={{borderWidth: 1}}></View>

              <View
                style={{
                  alignItems: 'center',
                  width: Dimensions.get('window').width / 2 - 40,
                }}>
                <View>
                  <Text style={[style.headerItemText, {fontWeight: '900'}]}>
                    食品被举报次数：2次
                  </Text>
                </View>
                <View>
                  <Text style={[style.headerItemText, {fontWeight: '900'}]}>
                    卫生被举报次数：1次
                  </Text>
                </View>
                <View>
                  <Text style={[style.headerItemText, {fontWeight: '900'}]}>
                    安全被举报次数：2次
                  </Text>
                </View>
                <View>
                  <Text style={[style.headerItemText, {fontWeight: '900'}]}>
                    其他被举报次数：0次
                  </Text>
                </View>
              </View>
            </View>

            <View>
              <Text
                style={[
                  style.headerItemText,
                  ,
                  {fontWeight: '900', fontSize: 15, marginTop: 20},
                ]}>
                统计时间：2023年11月1日-2023年11月30日
              </Text>
            </View>
          </View>
        </View>
      </View>
    </ScrollView>
    // </LinearGradient>
  );
}

const style = StyleSheet.create({
  box: {
    display: 'flex',
    alignItems: 'center',
    // backgroundColor: '#97DC93',
  },
  container: {
    flexDirection: 'row',
    width: Dimensions.get('window').width - 40,
    backgroundColor: '#fff',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    marginTop: 20,
    position: 'absolute',
    zIndex: 1,
  },
  headerItemParent: {
    width: Dimensions.get('window').width / 5,
    alignItems: 'center',
    marginTop: 10,
  },
  headerItem: {
    width: 60,
    height: 60,
    borderRadius: 50,
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerItemText: {
    fontSize: 13,
    color: '#000',
  },
  foot: {
    backgroundColor: '#fff',
    borderRadius: 10,
    width: Dimensions.get('window').width,
    height: 600,
    marginTop: 110,
    paddingLeft: 20,
    paddingRight: 20,
  },
});
